<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="Scope1.css"/>
</head>
<body>
<div ng-controller="EventController">
    Root scope
    <tt>MyEvent</tt> count: {{count}}
    <ul>
        <li ng-repeat="i in [1]" ng-controller="EventController">
            <button ng-click="$emit('MyEvent')">
                $emit('MyEvent')
            </button>
            <button ng-click="$broadcast('MyEvent')">
                $broadcast('MyEvent')
            </button>
            <br>
            Middle scope
            <tt>MyEvent</tt> count: {{count}}
            <ul>
                <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                    Leaf scope
                    <tt>MyEvent</tt> count: {{count}}
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script>
    function EventController($scope) {
        $scope.count = 0;
        $scope.$on('MyEvent', function () {
            $scope.count++;
        });
    }
</script>
</html>